<template>
  <div class="container">
    <el-card style="margin: 10px 10px 20px 10px">
      <el-row type="flex" justify="space-between" align="middle">
        <el-form :inline="true">
          <el-form-item label-width="85px" label="关键字" size="small">
            <el-input
              placeholder="根据文章标题搜索"
              v-model.trim="page.keyword"
              @keydown.enter.native="handleFilter"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="85px" label="状态" size="small">
            <el-select placeholder="请选择" v-model="page.state">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="resetForm">清除</el-button>
            <el-button size="small" type="primary" @click="handleFilter"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end" style="margin-top: -20px">
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="add(3)"
            >新增技巧</el-button
          >
        </el-row>
      </el-row>

      <el-row>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table
          v-loading="loading"
          element-loading-text="给我一点时间"
          highlight-current-row
          :data="dataList"
          :header-cell-style="{ background: '#fafafa', color: '#6060266' }"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号"   width="100">
          </el-table-column>
          <el-table-column
            prop="title"
            label="文章标题"
            width="350"
          >
            <template slot-scope="{ row }">
              <span>{{ row.title }}</span>
              <a
                href="#"
                class="el-icon-film"
                v-if="row.videoURL"
                @click="videoPlayer(row.videoURL)"
              ></a>
            </template>
          </el-table-column>
          <el-table-column
            prop="visits"
            label="阅读数"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="录入人"

            width="180"
          >
          </el-table-column>
          <el-table-column label="录入时间"  >
            <template #default="{ row }">
            <div v-text="row.createTime.replace(/T|.000Z/g,' ')"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="formatStatus"
            width="100"
          >
          </el-table-column>

          <el-table-column label="操作"  >
            <template slot-scope="{ row }">
              <el-button type="text" size="medium" style="font-size: 14;" @click="Preview(row,1)"
                >预览</el-button
              >
              <el-button type="text" size="medium" style="font-size: 14;" @click="handleStatus(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                size="medium "
                style="font-size: 14px"
                :disabled="row.state === 0"
                @click="Preview(row,2)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                style="font-size: 14px"
                :disabled="row.state === 0"
                @click="deleteBtn(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 15px">
      </el-row>
      <!-- /分页 -->
       <el-pagination
       background
       style="text-align:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[5, 10, 20, 50]"
      layout=" prev, pager, next,sizes,jumper"
      :total="page.total"
      >
    </el-pagination>
    </el-card>

    <!-- 视频播放 -->
    <div v-if="showVideo" class="video-preview">
        <div class="box">
          <video
            :src="videoURL"
            controls="controls"
            autoplay="autoplay"
            loop="loop"
          ></video>
      </div>
       <div class="close el-icon-close" @click="showVideo = false"> </div>
    </div>
    <el-dialog
  :title="type===1?'预览文章':'修改文章'"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
 <div v-if="type===1">
   <div class="title">
    <h2>{{preview.title}}</h2>
    <div>
      <span >{{time}}</span>
    <span>超级管理员</span> <span class="el-icon-view"></span> <span>{{preview.visits}}</span> </div>
  </div>
  <div class="content" v-html="preview.articleBody">

  </div>
 </div>
 <el-form ref="form" :model="form" label-width="80px" v-else :rules="rules">
  <el-form-item label="文章标题:" prop="title" label-width="100px">
    <el-input v-model="form.title" size="small"></el-input>
  </el-form-item>
  <el-form-item label="文章内容:" prop="articleBody" label-width="100px">
      <quill-editor v-model="form.articleBody"    :options="editorOption"

                  style="height:220px; padding-bottom:50px"></quill-editor>
  </el-form-item>
   <el-form-item label="视频地址:">
    <el-input v-model="form.videoURL" placeholder="请输入视频地址"></el-input>
  </el-form-item>
   <el-form-item style="text-align:right;padding-top:30px;margin:0">
    <el-button @click="handleClose">取消</el-button>
    <el-button type="primary" @click="handleSubmit">确认</el-button>
  </el-form-item>
 </el-form>

</el-dialog>
  </div>
</template>

<script>
// 引入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 题型枚举
import { status } from '@/api/hmmm/constants.js'
// 列表，删除，改变状态
import { list, remove, changeState, detail, update, add } from '@/api/hmmm/articles'

export default {
  components: {
    quillEditor
  },

  data () {
    return {
      // 富文本
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序，无序列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] // 代码块 图片 链接
          ]
        }
      },
      form: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
        ]
      },
      videoURL: '', // 视频地址
      showVideo: false, // 视频播放
      addDialog: false, // 添加弹层
      showDialog: false, // 预览弹层
      loading: false,
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 每页数量
        keyword: null, // 关键词
        state: null // 状态
        // total: 0, // 总数
      },
      dataList: [], // 表单数据
      alertText: '', // aleart 提示信息
      dialogVisible: false, // dialog框,
      preview: {},
      time: '',
      type: 1
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async  add (type) {
      console.log(111)
      this.type = type
      this.dialogVisible = true
    },
    // 确认修改
    async handleSubmit () {
      await this.$refs.form.validate()
      if (this.type === 2) {
        const res = await update(this.form)
        console.log(res)
        console.log(123456789 + this.form.id)
        this.getList()
        this.handleClose()
      } else {
        const res = await add(this.form)
        console.log(res)
        this.$message.success('添加成功')
        this.getList()
        this.handleClose()
      }
    },
    // 获取列表
    async getList () {
      this.loading = true
      const { data } = await list(this.page)
      this.dataList = data.items
      this.page.total = data.counts
      this.alertText = `数据一共 ${this.page.total} 条`
      this.loading = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.page.pagesize = val
      if (this.page.page === 1) {
        this.getList(this.page)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    },
    // 搜索
    handleFilter () {
      this.page.page = 1
      this.getList()
    },
    // 清除
    resetForm () {
      // 重置搜索
      this.page = {
        page: 1, // 当前页码
        pagesize: 10, // 每页数量
        keyword: null, // 关键词
        state: null // 状态
      }
      this.getList()
    },
    // 删除组题列表
    async deleteBtn (data) {
      try {
        await this.$confirm('此操作将永久删除该文章, 是否继续？', '提示', {
          type: 'warning'
        })
        await remove(data)
        // 更新视图
        await this.getList()
        this.$message.success('删除文章成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 禁用和启用
    async handleStatus (row) {
      const status = row.state ? '禁用' : '启用'
      try {
        await this.$confirm(`您确定${status}该文章吗`, '提示', {
          type: 'warning'
        })
        row.state === 1 ? (row.state = 0) : (row.state = 1)
        await changeState(row)
        this.$message.success(`${status}成功 !`)
        await this.getList()
      } catch (error) {
        this.$message.error(`${status}失败 !`)
      }
    },
    // 状态枚举
    formatStatus (row, column, cellValue, index) {
      const obj = status.find((item) => item.value * 1 === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    // 预览+修改
    async Preview (dev, type) {
      const { data } = await detail(dev)
      this.dialogVisible = true
      console.log(data)
      this.type = type
      if (type === 1) {
        this.preview = data
        this.time = this.preview.createTime.replace(/T|.000Z/g, ' ')
      } else if (type === 2) {
        this.preview = {}
        this.form.title = data.title
        this.form.articleBody = data.articleBody
        this.form.videoURL = data.videoURL
        console.log(data.id)
        this.form.id = data.id
        console.log(this.form.id)
        console.log(this.form.videoURL)
      }
    },
    // 修改文章
    // async editBtn (dev, type) {
    //   this.dialogVisible = true
    //   const { data } = await detail(dev)
    //   console.log(data)
    //   this.form = data

    //   this.type = type
    // },
    // 播放视频
    videoPlayer (url) {
      this.videoURL = url
      this.showVideo = true
    },
    handleClose (done) {
      for (const key in this.form) {
        this.form[key] = ''
      }
      // 关闭弹窗
      this.dialogVisible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped  lang="scss">
::v-deep .el-dialog__body{
  padding-top: 20px;
  .title{
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
  }
  .content{
    background-color: #f5f5f5;
  }
}
::v-deep .el-card{
  margin-bottom: 35px;
}
::v-deep .el-pagination__jump{
  margin: 0;
}
.el-icon-film {
  color: #2918ff;
  font-size: 18px;
}
.video-preview{
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.3);
 overflow: hidden;
 z-index: 9999
}
.close{
 width: 50px;
 height: 50px;
 position: absolute;
 top: 10%;
 left: 50%;
 transform: translate(-50%);
 background: rgba(0,0,0,.4);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
 border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
}
.box{
 width: 800px;
 height: 600px;
 position: absolute;
 left: 50%;
 top: 50%;
  transform: translate(-50%,-50%);
}
.box video{
  width: 100%;
 height: 100%;
}

</style>
